<template>
    <div class="system-quartzManager-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">


            <div>
                <el-button type="primary" size="default" @click="handlerAdd()">增加定时任务</el-button>
            </div>

            <el-card style="margin-top: 20px;" shadow="hover" class="layout-padding-auto">
                <el-tabs v-model="state.currentMicroName" tab-position="top" id="jobsTab">
                    <el-tab-pane v-for="(list, key) in state.jobsMap" :name="key" :key="key" :label="key" border>
                        <el-table size="default" :data="list">
                            <el-table-column align="left" prop="jobType" label="任务类型" show-overflow-tooltip width="120px"></el-table-column>
                            <el-table-column align="left" prop="jobClass" show-overflow-tooltip label="任务执行类" width="200px"></el-table-column>
                            <el-table-column align="left" prop="jobName"  show-overflow-tooltip label="任务名称" width="280px"></el-table-column>
                            <!-- <el-table-column align="left" prop="jobGroupName" label="任务组名称" width="180px"></el-table-column> -->
                            <el-table-column align="left" prop="jobStatus" label="当前状态" width="100px"></el-table-column>
                            <el-table-column align="left" width="120px"  show-overflow-tooltip label="执行计划">
                                <template #default="scope">
                                    {{ scope.row.jobTime }}
                                    <span v-if="scope.row.jobType == 'SimpleTrigger'">ms</span>
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="执行次数||下次执行时间" show-overflow-tooltip width="200px">
                                <template #default="scope">
                                    {{ scope.row.timesTriggered }}||{{ scope.row.nextFireTime }}
                                </template>
                            </el-table-column>
                            <el-table-column align="left" prop="jobData" show-overflow-tooltip label="运行参数">
                                <template #default="scope">
                                    {{ scope.row.jobData }}
                                </template>
                            </el-table-column>
                            <el-table-column align="left" label="操作" width="180px">
                                <template #default="scope">
                                    <el-dropdown>
                                        <el-button type="primary">
                                            操作<el-icon class="el-icon--right"><arrow-down /></el-icon>
                                        </el-button>
                                        <template #dropdown>
                                            <el-dropdown-menu>
                                                <el-dropdown-item @click="handlerPause(scope.$index, scope.row, key)"
                                                    :icon="VideoPause">暂&nbsp;&nbsp;&nbsp;&nbsp;停</el-dropdown-item>
                                                <el-dropdown-item @click="handlerResume(scope.$index, scope.row, key)"
                                                    :icon="VideoPlay">恢&nbsp;&nbsp;&nbsp;&nbsp;复</el-dropdown-item>
                                                <el-dropdown-item @click="handlerEdit(scope.$index, scope.row, key)"
                                                    :icon="EditPen">修&nbsp;&nbsp;&nbsp;&nbsp;改</el-dropdown-item>
                                                <el-dropdown-item @click="handlerRunNow(scope.$index, scope.row, key)"
                                                    :icon="DArrowRight">立刻执行</el-dropdown-item>
                                                <el-dropdown-item @click="handlerQueryLogs(scope.$index, scope.row, key)"
                                                    :icon="Document">查看日志</el-dropdown-item>
                                            </el-dropdown-menu>
                                        </template>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </el-card>

        <quartDialog ref="quartDialogRef"></quartDialog>
    </div>
</template>


<script setup lang="ts" name="quartzManager">

import { ArrowDown, DArrowRight, EditPen, VideoPause, VideoPlay, Document } from '@element-plus/icons-vue'
import { reactive, onMounted, defineAsyncComponent, ref } from 'vue';
import { ElLoading, ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router';




// 导入接口
import { useSysApi } from "../../../api/sys";


// 引入组件
const quartDialog = defineAsyncComponent(() => import('/@/views/system/quartzManager/dialog.vue'));

const quartDialogRef = ref();

const router = useRouter();


const state = reactive({
    currentMicroName: "",
    loadingInstance: null as any,
    jobsMap: null as any
});

const handlerPause = async (index: any, row: any, microName: any) => {
    try {
        await useSysApi().quartzPause(microName, {
            jobName: row.jobName,
            jobGroupName: row.jobGroupName
        });
        row.jobStatus = 'PAUSED';
        ElMessage.success("操作成功");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}

const handlerResume = async (index: any, row: any, microName: any) => {
    try {
        await useSysApi().quartzResume(microName, {
            jobName: row.jobName,
            jobGroupName: row.jobGroupName
        });
        row.jobStatus = 'NORMAL';
        ElMessage.success("操作成功");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}
const handlerQueryLogs = async (index: any, row: any, microName: any) => {
    router.push({ name: 'common_menu_job_log_manager', query: { serviceName: microName, jobName: row.jobName } });
}


const handlerAdd = () => {
    quartDialogRef.value.openDialog();
}


const handlerEdit = async (index: any, row: any, microName: any) => {
    // 打开立即执行的窗口
    quartDialogRef.value.openDialog("edit", row, microName);
}





const handlerRunNow = async (index: any, row: any, microName: any) => {
    // 打开立即执行的窗口
    try {
        await useSysApi().quartzRunNow(microName, row);
        ElMessage.success("执行成功");
    } catch (error: any) {
        ElMessage.error(error.msg);
    }

}

const getAllJobs = async () => {
    state.loadingInstance = ElLoading.service({
        target: ".system-quartzManager-container"
    })
    state.jobsMap = await useSysApi().getAllJobs({});
    for (var prop in state.jobsMap) {
        state.currentMicroName = prop;
        break;
    }
    state.loadingInstance.close();
}

// 页面加载时
onMounted(() => {
    getAllJobs();
});


</script>





<style scoped lang="scss">
.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}


.system-quartzManager-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}
</style>
